<template>
  <q-dialog v-model="visible">
    <q-card>
      <q-card-section>
        <div class="text-h6">坐标系选择</div>
      </q-card-section>
      <q-separator/>
      <q-card-section class="q-gutter-y-md">
        <q-select
          style="min-width: 15rem"
          outlined behavior="menu"
          v-model="targetFrame"
          :options="options"
          :use-input="!targetFrame"
          @filter="filterFn"
          clearable
          label="基坐标" emit-value map-options
        />
        <q-select
          style="min-width: 15rem"
          outlined behavior="menu"
          v-model="sourceFrame"
          :options="options"
          :use-input="!sourceFrame"
          @filter="filterFn"
          clearable
          label="目标坐标" emit-value map-options
        />
      </q-card-section>
      <q-slide-transition>
        <div v-if="sourceFrame && targetFrame">
          <q-btn stretch  class="full-width" color="primary" label="获取坐标数据" icon="check" @click="getPosture"/>
        </div>
      </q-slide-transition>
    </q-card>
  </q-dialog>
</template>

<script>
import { ref } from 'vue'
import { api } from 'boot/axios.js'
import { useAPIStore } from 'stores/api/index.js'
import { useQuasar } from 'quasar'

export default {
  name: 'GetCurrentPosture',
  props: {
    modelValue: Object
  },
  setup (props, context) {
    const $q = useQuasar()
    const visible = ref(false)

    const posture = ref({})
    const targetFrame = ref('') // 基坐标
    const sourceFrame = ref('') // 目标坐标
    const frameOptions = ref([])// 坐标系选项
    const options = ref([])

    function getFrameList () {
      api.post(useAPIStore().amrRosUrl + 'call', {}, { params: { service: 'tf/list_frames' } }).then(res => {
        frameOptions.value = res.data.values.frames
      })
    }

    return {
      targetFrame,
      sourceFrame,
      options,
      visible,
      show () {
        getFrameList()
        visible.value = true
        posture.value = props.modelValue
      },
      filterFn (val, update) {
        if (val === '') {
          update(() => {
            options.value = frameOptions.value
          })
          return
        }

        update(() => {
          const needle = val.toLowerCase()
          options.value = frameOptions.value.filter(v => v.toLowerCase().indexOf(needle) > -1)
        })
      },
      getPosture () {
        api.post(useAPIStore().amrRosUrl + 'call', {
          target_frame: targetFrame.value,
          source_frame: sourceFrame.value
        }, { params: { service: 'tf/get_frame_pose' } }).then(res => {
          const pose = res.data.values.pose
          posture.value.frameID = pose.header.frame_id
          posture.value.qw = pose.pose.orientation.w
          posture.value.qx = pose.pose.orientation.x
          posture.value.qy = pose.pose.orientation.y
          posture.value.qz = pose.pose.orientation.z
          posture.value.x = pose.pose.position.x
          posture.value.y = pose.pose.position.y
          posture.value.z = pose.pose.position.z
        }).then(() => {
          $q.notify({
            type: 'positive',
            message: '获取姿态成功'
          })
          visible.value = false
        }).catch(() => {
          $q.notify({
            type: 'negative',
            message: '获取姿态失败'
          })
        })
      }
    }
  }
}
</script>
